<template>
  <div
    class="requirement-card"
    :draggable="draggable"
    @dragstart="$emit('dragstart', $event)"
    :class="{ 'is-draggable': draggable }"
  >
    <!-- 顶部：需求描述和功能按钮 -->
    <div class="card-header">
      <div class="summary">{{ card.summary }}</div>
      <div class="actions">
        <el-dropdown @command="handleCommand">
          <el-button link :icon="More" />
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="view">查看</el-dropdown-item>
              <el-dropdown-item command="edit" v-if="!isView">编辑</el-dropdown-item>
              <el-dropdown-item command="delete" v-if="!isView">删除</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <!-- 中部：工作量、负责人、JT单号等信息 -->
    <div class="card-body">
      <div class="info-item">
        <el-icon><DataAnalysis /></el-icon>
        <span>前端: {{ card.front_workload }}人天</span>
      </div>
      <div class="info-item">
        <el-icon><DataAnalysis /></el-icon>
        <span>后端: {{ card.back_workload }}人天</span>
      </div>
      <div class="info-item">
        <el-icon><User /></el-icon>
        <span>JT单号: {{ card.jt_no }}</span>
      </div>
    </div>

    <!-- 底部：优先级、状态、时间等信息 -->
    <div class="card-footer">
      <div class="priority">
        <el-tag :type="getPriorityType(card.important)" size="small"> 优先级: {{ card.important }} </el-tag>
      </div>
      <div class="status-time">
        <div class="create-time">
          <el-icon><Clock /></el-icon>
          <span>{{ formatDate(card.create_at) }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { More, DataAnalysis, User, Clock } from "@element-plus/icons-vue";
import { SprintBoard } from "../types/sprintBoard";
import { onMounted } from "vue";

interface Props {
  card: SprintBoard.RequirementCard;
  draggable?: boolean;
  isView?: boolean;
}

// 移除导致无限递归的计算属性
// const isDraggable = computed(() => {
//   console.log("RequirementCard - draggable prop:", props.draggable);
//   return props.draggable;
// });

interface Emits {
  (e: "dragstart", event: DragEvent): void;
  (e: "view", card: SprintBoard.RequirementCard): void;
  (e: "edit", card: SprintBoard.RequirementCard): void;
  (e: "delete", card: SprintBoard.RequirementCard): void;
}

const props = withDefaults(defineProps<Props>(), {
  draggable: false,
  isView: false
});

onMounted(() => {
  console.log("RequirementCard mounted - draggable:", props.draggable);
});

const emit = defineEmits<Emits>();

// 处理下拉菜单命令
const handleCommand = (command: string) => {
  switch (command) {
    case "view":
      emit("view", props.card);
      break;
    case "edit":
      emit("edit", props.card);
      break;
    case "delete":
      emit("delete", props.card);
      break;
  }
};

// 获取优先级标签类型
const getPriorityType = (priority: number): "danger" | "warning" | "success" | "" => {
  if (priority >= 80) return "danger";
  if (priority >= 50) return "warning";
  if (priority > 0) return "success";
  return "";
};

// 格式化日期
const formatDate = (date: Date): string => {
  return new Date(date).toLocaleDateString();
};
</script>

<style lang="scss" scoped>
.requirement-card {
  margin-bottom: 12px;
  background-color: var(--el-bg-color);
  border: 1px solid var(--el-border-color-light);
  border-radius: 4px;
  box-shadow: var(--el-box-shadow-light);
  transition: all 0.3s ease;
  &.is-draggable {
    cursor: move;
  }
  &.is-draggable:hover {
    border-color: var(--el-color-primary-light-3);
    box-shadow: var(--el-box-shadow);
    transform: translateY(-2px);
  }
  &:hover:not(.is-draggable) {
    box-shadow: var(--el-box-shadow);
    transform: translateY(-2px);
  }
  .card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px;
    border-bottom: 1px solid var(--el-border-color-light);
    .summary {
      flex: 1;
      font-size: 14px;
      font-weight: 500;
      line-height: 1.4;
      color: var(--el-text-color-primary);
      word-break: break-word;
    }
    .actions {
      margin-left: 10px;
    }
  }
  .card-body {
    padding: 12px;
    .info-item {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      font-size: 12px;
      color: var(--el-text-color-secondary);
      &:last-child {
        margin-bottom: 0;
      }
      .el-icon {
        margin-right: 4px;
        font-size: 14px;
      }
    }
  }
  .card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background-color: var(--el-fill-color-light);
    border-top: 1px solid var(--el-border-color-light);
    .priority {
      .el-tag {
        font-size: 12px;
      }
    }
    .status-time {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      font-size: 12px;
      color: var(--el-text-color-secondary);
      .create-time {
        display: flex;
        align-items: center;
        .el-icon {
          margin-right: 4px;
          font-size: 14px;
        }
      }
    }
  }
}
</style>

```
